<template>
  <div class="desktop-menu-layout mobile-menu-layout sticky-footer-layout">
    <div id="app">
      <div id="pageTop"></div>
      <Menu
        display="desktop"
        @click="selectMenu"
        :selected="activeMenu"
        v-slot="slotProps"
      >
        <MenuCategory :selected="slotProps.selected" title="Item 1">
          <MenuCategory :selected="slotProps.selected" title="Item 1.1">
            <MenuLink
              :selected="slotProps.selected"
              title="First"
              id="1st"
              url=""
            ></MenuLink>
            <MenuLink
              :selected="slotProps.selected"
              title="Second"
              id="2nd"
              url=""
            ></MenuLink>
          </MenuCategory>
        </MenuCategory>
        <MenuLink
          :selected="slotProps.selected"
          title="Home"
          id="home"
          url=""
          active="true"
        ></MenuLink>
        <MenuLink
          :selected="slotProps.selected"
          title="About"
          id="about"
          url=""
        ></MenuLink>
      </Menu>
      <NavBar
        title="basecoat </br> components"
        :sections="sections"
        company="Internal Europe"
      ></NavBar>
      <!-- <HelloWorld msg="Hello world!" /> -->
      <main class="page-wrapper">
        <!-- <SectionHeader title="Top Section" :top="true"></SectionHeader> -->
        <Section title="First Section" id="first-section">
          <Input
            id="test"
            label="Test"
            type="email"
            is_required="false"
            icon="user"
            help="This is help"
            v-model="input.input"
          ></Input>
          <DatePicker
            id="date"
            label="Date"
            is_required="false"
            icon="calendar"
            help="Select a date"
            v-model="input.date"
          ></DatePicker>
          <Dropdown
            label="Select color"
            icon="paint-brush"
            :options="colorOptions"
            v-model="input.dropdown"
          ></Dropdown>
          <Dropdown
            label="Select Number"
            icon="sort-numeric-desc"
            v-model="selectedNumber"
          >
            <DropdownOption
              v-for="number in numberOptions"
              :key="number.someId"
              :k="number.someId"
              :v="number.someVal"
            ></DropdownOption>
          </Dropdown>
          <Dropdown label="Select thing" icon="s15" v-model="input.dropdown2">
            <DropdownOption k="test" v="Test"></DropdownOption>
            <DropdownOption k="foo" v="Foo"></DropdownOption>
          </Dropdown>
          <Toggle v-model="input.toggle" label="Enable stuff"></Toggle>
          <Panels id="panels">
            <Panel
              id="panel-1"
              parent_id="panels"
              title="First Panel"
              :items="panelItem"
            >
              <template #body> Hello world </template>
              <template #footer>
                <div class="btn-link-toolbar pull-right">
                  <Button label="Delete" action="link" icon="trash"></Button>
                  <span class="btn-separator"></span>
                  <Button label="View" action="link" icon="desktop"></Button>
                </div>
              </template>
            </Panel>
            <Panel id="panel-2" parent_id="panels" title="Second Panel">
              <template #body> Hello world </template>
            </Panel>
            <Panel id="panel-3" parent_id="panels" title="Third Panel"
              ><template #footer>
                <div class="btn-link-toolbar pull-right">
                  <Button label="View" action="link" icon="desktop"></Button>
                </div>
              </template>
            </Panel>
          </Panels>
          <Button
            action="primary"
            label="Show Modal"
            icon="window-maximize"
            @click="showModal = true"
          ></Button>
          <Button action="success" label="Submit" url="/test"></Button>
          <hr />
          <Button
            action="primary"
            label="Test"
            icon="pencil"
            tooltip="Test tooltip"
            is_loading="false"
          ></Button>
          <div class="progress">
            <div
              class="progress-bar"
              role="progressbar"
              style="width: 90%"
            ></div>
          </div>
          <div class="table-responsive scrollbars">
            <table class="table table-striped test">
              <thead>
                <tr>
                  <th>Column1</th>
                  <th>Column2</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Foo</td>
                  <td>Bar</td>
                </tr>
                <tr>
                  <td>Test</td>
                  <td>Bla</td>
                </tr>
              </tbody>
            </table>
          </div>
        </Section>
        <Section title="Second Section" id="second-section"> </Section>
        <Modal
          :open="showModal"
          id="modal"
          :dismissable="true"
          size="large"
          title="Some title"
          @close="showModal = false"
        >
          <template #body>
            <Dropdown label="Select thing" icon="s15" v-model="input.dropdown3">
              <DropdownOption k="test" v="Test"></DropdownOption>
              <DropdownOption k="foo" v="Foo"></DropdownOption>
              <DropdownOption k="sdf" v="zer"></DropdownOption>
              <DropdownOption k="a" v="A"></DropdownOption>
              <DropdownOption k="b" v="B"></DropdownOption>
              <DropdownOption k="c" v="C"></DropdownOption>
            </Dropdown>
          </template>
        </Modal>
      </main>
      <Menu display="mobile">
        <MenuLink title="Home" url="" active="true"></MenuLink>
        <MenuLink title="About" url=""></MenuLink>
      </Menu>
    </div>
  </div>
</template>

<script>
// import HelloWorld from "./components/Hello";
// import { Section, SectionHeader } from "./components/Section";
import { str2bool } from "./util";
import { Section } from "./components/Section";
import Button from "./components/Button";
import Input from "./components/Input";
import NavBar from "./components/NavBar";
import Modal from "./components/Modal";
import { Dropdown, DropdownOption } from "./components/Dropdown";
import { DatePicker } from "./components/Date";
import { Panel, Panels } from "./components/Panel";
import Toggle from "./components/Toggle";
import { Menu, MenuLink, MenuCategory } from "./components/Menu";
window.str2bool = str2bool;

export default {
  name: "App",
  components: {
    NavBar,
    // SectionHeader,
    // HelloWorld,
    Menu,
    MenuLink,
    MenuCategory,
    Modal,
    Button,
    Input,
    Panel,
    Panels,
    Section,
    Dropdown,
    DropdownOption,
    DatePicker,
    Toggle,
  },
  mounted() {
    let activeMenuId = localStorage.getItem("activeMenuId");
    let activeMenuBreadcrumb = localStorage.getItem("activeMenuBreadcrumb");
    if (activeMenuId && activeMenuBreadcrumb) {
      this.activeMenu = {
        id: activeMenuId,
        breadcrumb: activeMenuBreadcrumb.split(","),
      };
    }
  },
  data() {
    return {
      showModal: false,
      activeMenu: {},
      panelItem: {
        Status: "Not good",
        "Item#": "DJO54569",
        Location: "Mars",
      },
      sections: {
        "first-section": "First Section",
        "second-section": "Second Section",
      },
      numberOptions: [
        { someId: "1", someVal: "One" },
        { someId: "2", someVal: "Two" },
        { someId: "3", someVal: "Three" },
      ],
      selectedNumber: "",
      colorOptions: {
        red:
          '<div>Red  <span class="fa fa-square" style="color: red"></span></div>',
        blue:
          '<div>Blue  <span class="fa fa-square" style="color: blue"></span></div>',
        green:
          '<div>Green  <span class="fa fa-square" style="color: green"></span></div>',
        yellow:
          '<div>Yellow  <span class="fa fa-square" style="color: yellow"></span></div>',
      },
      input: {
        dropdown: "red",
        dropdown3: "foo",
      },
    };
  },
  methods: {
    selectMenu(event) {
      this.activeMenu = event;
      localStorage.setItem("activeMenuId", event.id);
      localStorage.setItem("activeMenuBreadcrumb", event.breadcrumb);
    },
  },
};
</script>
<style scoped>
.test {
  border-top: 3px red solid;
  border-radius: 3px;
}
</style>